<template>
	<div class="play_dialog" v-if="props.isShowDialog">
		<div class="dialog_box">
			<div class="box_title">
				<img class="title" src="../../image/icon_video_dialog.png" alt />
				<img class="close" src="../../image/icon_close.png" alt @click="handleClose" />
			</div>
			<div class="box_ul">
				<div class="box_ul_left">
					<deviceMent :menuList="deviceList" :defaultCheckedMenuId="row.id" @clickMenu="handleMenuItem"></deviceMent>
				</div>
				<div class="box_ul_right">
					<video ref="videoRef" style="width: 100%; height:100%;" controls autoplay v-if="liveUrl" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import Hls from 'hls.js';
import { getVideoPlayAddress } from '/@/api/largeScreen/baseView';

const deviceMent = defineAsyncComponent(() => import('./videoMenu.vue'));

const props = defineProps({
	isShowDialog: {
		default: false,
		type: Boolean,
	},
	row: {
		default: null,
		type: Object,
	},
	videoList: {
		default: [],
		type: Array,
	},
	deviceSerial:{
		default:'',
		type:String
	}
});

const emit = defineEmits(['clickClose']);

const deviceList = reactive([
	{ id: '1', name: '1号区域', children: [] },
	{ id: '2', name: '2号区域', children: [] },
	{ id: '3', name: '3号区域', children: [] },
]);
const liveUrl = ref('');
const videoRef = ref();
const hls = ref();

//关闭弹窗
const handleClose = () => {
	destroyVideo();
	emit('clickClose');
};
/**
 * 初始化播放器
 */
const initVideo = async () => {
	await nextTick();
	if (Hls.isSupported()) {
		hls.value = new Hls();
		hls.value.loadSource(liveUrl.value);
		hls.value.attachMedia(videoRef.value);
		hls.value.on(Hls.Events.MANIFEST_PARSED, function () {
			videoRef.value.play();
		});
	} else if (videoRef.value.canPlayType('application/vnd.apple.mpegURL')) {
		videoRef.value.src = liveUrl.value;
		videoRef.value.load();
		videoRef.value.play();
	}
};
/**
 * 销毁播放器
 */
const destroyVideo = () => {
	if (videoRef.value) {
		videoRef.value.pause();
		videoRef.value = null;
	}
	if (hls.value) {
		hls.value.destroy();
		hls.value = null;
	}
};
/**
 * 获取菜单
 */
const getMenuList = () => {
	let tempArray1: any[] = [],
		tempArray2: any[] = [],
		tempArray3: any[] = [];
	props.videoList.forEach((item: any) => {
		if (item.exData1Id == '1') {
			tempArray1.push(item);
		} else if (item.exData1Id == '2') {
			tempArray2.push(item);
		} else if (item.exData1Id == '3') {
			tempArray3.push(item);
		}
	});
	deviceList.forEach((item) => {
		if (item.id == '1') {
			item.children = tempArray1;
		} else if (item.id == '2') {
			item.children = tempArray2;
		} else if (item.id == '3') {
			item.children = tempArray3;
		}
	});
};

watch(
	() => props.videoList,
	(e) => {
		if (e.length > 0) {
			getMenuList();
		}
	},
	{
		deep: true,
		immediate: true,
	}
);

const getVideoUrl = async (param: any) => {
	const data = await getVideoPlayAddress(param);
	if (data && data.code == 0) {
		liveUrl.value = data.data;
		initVideo();
	}
};

watch(
	() => props.row,
	(val) => {
		if (val) {
			var param = {
				code: props.deviceSerial,
				quality: 1,
				channelNo: props.row.serial,
			};
			getVideoUrl(param);
		}
	},
	{
		deep: true,
		immediate: true,
	}
);

const handleMenuItem = (row: any) => {
	//先销毁播放器
	destroyVideo()
	var param = {
		code: props.deviceSerial,
		quality: 1,
		channelNo: row.serial,
	};
	getVideoUrl(param)
};
</script>
<style lang='less' scoped>
.play_dialog {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #00000050;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	.dialog_box {
		width: 68%;
		height: 75%;
		padding: 8px;
		box-sizing: border-box;
		background: rgba(1, 16, 33, 0.9);
		border: 1px solid #000000;
		.box_title {
			height: 50px;
			width: 100%;
			background: url('../../image/icon_title_bg_1.png') no-repeat;
			background-size: 100% 100%;
			position: relative;
			display: flex;
			align-items: center;
			.title {
				width: 73px;
				height: 16px;
				margin-left: 46px;
			}
			.close {
				position: absolute;
				right: 24px;
				width: 24px;
				height: 24px;
				cursor: pointer;
			}
		}
	}
}
.box_ul {
	display: flex;
	align-items: flex-start;
	height: calc(100% - 70px);
	width: 100%;
	margin-top: 10px;
	&_left {
		width: 280px;
		height: 100%;
		box-sizing: border-box;
		padding: 14px 14px 0 14px;
	}
	&_right {
		width: calc(100% - 280px);
		height: 100%;
		background-color: #000000;
	}
}
</style>